<template>
  <div class="h-loading">
    <div class="mask" v-show="status"></div>
    <div class="loading-aniation" v-show="status"></div>
    <div v-show="!status">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['status'],
    data() {
      return {}
    }
  }
</script>

<style scoped lang="less">
  .h-loading {
    position: relative;
    width: 100%;
    height: 100%;
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 998;
      width: 100%;
      height: 100%;
      filter: blur(15px);
      background: radial-gradient(rgba(212, 212, 212, 0.5) 10%, rgba(213, 213, 213, 0.5) 30%, rgba(211, 211, 211, 0.5) 50%);
    }
    .loading-aniation {
      position: absolute;
      top: 48%;
      left: 48%;
      z-index: 999;
      transform: translate(-100%, -100%);
      border: 1px solid rgba(0, 170, 255, .3);
      width: 30px;
      height: 30px;
      animation: loading 2s infinite;
      &::before,
      &::after {
        position: absolute;
        left: 0;
        content: '';
        height: 0px;
        width: 0px;
        border: 15px solid transparent;
      }
      &::before {
        top: 0;
        border-top-color: rgba(0, 170, 255, .5);
      }
      &::after {
        border-bottom-color: rgba(0, 170, 255, .5);
        bottom: 0;
      }
    }
    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }
      20% {
        transform: rotate(180deg);
      }
      60%, 100% {
        transform: rotate(360deg);
      }
    }
  }
</style>
